/*eslint-disable*/
import { useState, useEffect } from 'react';
import styled from 'styled-components';


const Wrapper = styled.div`
    padding:5px;
    >.theme{
        display:flex;
        justify-content: center;
        >div{
            width:50%;
            text-align:center;
            padding:5px;
        }
        .yes{
            border-radius:5px;
            box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
            background-color: rgba(235, 231, 231, 0.5);
        } 
        >input{
            padding:5px;
            font-size:14px;
            border-radius:5px;
            border:1px solid #a1a0a0;
        }
    }
    >.money,.note{
        display:flex;
        margin-top:10px;
        justify-content: center;
        align-items:center;
        >input{
            margin-left:5px;
            padding:8px;
            border-radius:5px;
            border:1px solid #a1a0a0;
        }
    }
    >.button-wrapper{
        display:flex;
        justify-content: flex-end;
        padding:10px;
        padding-right:20px;
        >button{
            background: rgb(59, 85, 71);
            color:rgb(221, 216, 216);
            padding:5px 15px;
            border-radius:5px;
            border:1px solid #a1a0a0;
            box-shadow: 1px 1px 2px 2px rgb(223, 220, 220);
        }
        >.close{
            margin:0px 20px;
            background: rgb(132, 134, 133);
        }
    }
    
`
type money={
    theme:string,
    note:string,
    money:number,
}
type TProp={
    onChange:(selected?:money | undefined)=>void
}
const NewMoney=(Props:TProp)=>{
    const [selected,setSelected]=useState<money>({
        theme:'支出',
        note:'',
        money:0,
    })

    return(
        <Wrapper>
            <div className='theme'>
                <div onClick={()=>{setSelected({...selected,theme:'支出'})}} 
                     className={selected.theme==='支出'?'yes':'no'}
                >
                    支出
                </div>
                <div onClick={()=>{setSelected({...selected,theme:'收入'})}}
                     className={selected.theme==='收入'?'yes':'no'}
                >
                    收入
                </div>
            </div>
            <div className='money'>
                <div>金额:</div>
                <input type="text"  
                       onChange={(e)=>{setSelected({...selected,money:Number(e.target.value)})}}
                       placeholder='请在此处输入金额'
                />
            </div>
            <div className='note'>
                <div>备注:</div>
                <input type="text"   value={selected.note} 
                       onChange={(e)=>{setSelected({...selected,note:e.target.value})}}
                       placeholder='请在此处输入备注'
                />
            </div>
            <div className='button-wrapper'>
                <button onClick={()=>{Props.onChange(selected)}}>保存</button>
                <button className="close" onClick={()=>{Props.onChange()}}>取消</button>
            </div>           
        </Wrapper>
    )
}

export default  NewMoney